<!--
 * @Author: your name
 * @Date: 2020-07-16 16:17:38
 * @LastEditTime: 2020-07-16 17:43:35
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue_plugins\src\views\tree\index.vue
-->
<template>
    <div class="container">
        <van-nav-bar title="组织架构图" :border="false" fixed left-arrow @click-left="$router.go('-1')" />
        <organization-chart :zoom="false" :datasource="ds" :verticaLevel="2" @node-click="getNode">
            <template slot-scope="{ nodeData }">
                <!-- feel free to customize the internal structure of node -->
                <div class="item_box">
                    <div class="item_title">{{nodeData.title}}</div>
                    <div class="item_name">{{nodeData.name}}</div>
                    <div class="item_name btn" @click.stop="Add(nodeData)">点击注册</div>
                </div>
            </template>
        </organization-chart>
    </div>
</template>
<script>
export default {
    data() {
        return {
            ds: {
                id: "1",
                name: "报单中心",
                title: "admin",
                children: [
                    { id: "2", name: "普通会员", title: "001", children: [] },
                    {
                        id: "3",
                        name: "普通会员",
                        title: "003",
                        children: [{
                                id: "4",
                                name: "普通会员",
                                title: "004",
                                children: []
                            },
                            {
                                id: "5",
                                name: "普通会员",
                                title: "005",
                                children: [{
                                    id: "6",
                                    name: "普通会员",
                                    title: "006",
                                    children: []
                                }]
                            }
                        ]
                    }
                ]
            }
        };
    },
    methods: {
        Add(item) {
            console.log("item", item);
            // item.children = [];
            item.children.push({
                id: 9,
                name: "荣耀会员",
                title: "009",
                children: []
            });
            this.$forceUpdate();
        },
        getNode(node) {
            console.log("node", node);
        }
    }
};
</script>
<style lang="less" scoped>
.btn {
    background-color: #ff6070;
    color: #fff;
}

.orgchart-container {
    width: 100%;
    height: auto;
    overflow: auto;
    box-sizing: border-box;
}

.item_box {
    border: 2px solid #ccc;
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2);
    // overflow: hidden;
    display: flex;
    flex-direction: column;
    width: auto;
    height: auto;
    font-size: 28px;
    border-radius: 10px;
}

/deep/.orgchart {
    background: none;
}

/deep/.orgchart-container {
    border: none;
}

.item_title {
    height: 60px;
    line-height: 60px;
    height: auto;
    word-break: break-all;
}

.item_name {
    height: 60px;
    line-height: 60px;
}
</style>